import React from "react";

interface MessageProps{
    data: NewMsg;
    scrollBottom: () => void;
}

// 用户信息
function Message(props: MessageProps){

    const { msg, user, date, isSelf } = props.data;
    const scrollBottom = props.scrollBottom;

    React.useEffect(() => {
        scrollBottom();
    },[scrollBottom]);

    return (
        <div className={isSelf ? "text-right pl-2 pr-2" : "text-left pl-2 pr-2"}>
            <span style={{fontSize: ".8rem", padding: "0px .3rem .6rem .3rem"}}>
                <span style={{fontSize: ".8rem",color: '#f22'}}>
                    {user}
                </span>
                <span className="pr-2 pl-2">|</span>
                <span>{date} </span>
            </span>
            <br />  
            <div 
                className={isSelf ? "alert alert-danger text-justify p-2" : "alert alert-info text-justify p-2"} 
                role="alert" 
                style={{display: "inline-block", maxWidth: "60%", minHeight: '42px'}}
            >
                {msg}
            </div>
        </div>
    );
}

export default Message;